<template>
  <div>
    <el-button
      class="exportBtn"
      type="primary"
      :loading="loading"
      @click="handleExport"
    >
      导出
    </el-button>
    <el-scrollbar height="400">
      <div id="printSingleDom">
        <PrintDoc />
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { pdfExportSingle } from '@lib/pdf'
import { ref } from 'vue'

import PrintDoc from './PrintDoc.vue'

const loading = ref(false)

function handleExport() {
  loading.value = true

  pdfExportSingle(
    document.querySelector('#printSingleDom')!,
    {
      orientation: 'portrait',
      fileName: '单节点导出.pdf',
      scale: 2
    },
    () => {
      loading.value = false
    }
  )
}
</script>

<style lang="scss" scoped>
.exportBtn {
  margin: 15px 0;
}

#printSingleDom {
  width: 793.69px;
}
</style>
